<template>
    <div class="applicationModal-div-box-Lu">
        <div class="tabs-card-edit-box">
            <a-tabs type="card" v-model:activeKey="summaryActiveKey" @change="summaryActiveChange">
                <a-tab-pane key="请休假记录" tab="请休假记录"></a-tab-pane>
                <a-tab-pane key="离岗记录" tab="离岗记录"></a-tab-pane>
            </a-tabs>
        </div>
        <div  class="tab-box-v1">
            <commpVxeTable
                :isCanWrap="true"
                :key="reCommpVxeTable"
                :config="dataTableConfig"
                :columns="columnsVxe"
                :formItem="formItem"
                :occupancyHeight="100"
                ref="administrativeOffice"
                @searchEvent="searchEvent"
                @resetEvent="resetEvent"
                >
                <template v-slot:operation_fqjkssj="{row}" data-desc="请休假开始时间">
                    {{ row.fqjkssj }} {{ row.fqjksxs }}
                </template>
                <template v-slot:operation_fqjjssj="{row}" data-desc="请休假结束时间">
                    {{ row.fqjjssj }} {{ row.fqjjsxs }}
                </template>
                <template v-slot:operation_fxjqrsj="{row}" data-desc="销假时间">
                    {{ row.fxjqrsj }} {{ row.fxjqrxs }}
                </template>
                <template v-slot:operation_fxm="{row}" data-desc="申请人">
                    <span style="padding-right: 21;" v-if="row.fxm.length == 2">
                        <span v-for="(trem,tI) in row.fxm.split('')" :key="tI" >
                            {{trem}}
                            <span v-if="tI+1 !== row.fxm.split('').length">&nbsp;&nbsp;</span>
                        </span>
                    </span>
                    <span style="padding-right: 21;" v-else>{{ row.fxm }}</span>
                </template>
                <template v-slot:operation_fhjmc="{row}" data-desc="环节名称">
                    <span>{{ row.fhjmc }}</span><br/>
                    <span v-if="row.fsftqxj == '是'">（提前销假）</span>
                </template>
            </commpVxeTable>
        </div>
    </div>
</template>
<script>
import  commpVxeTable   from '@/components/commp-vxe-table/commp-vxe-table.vue'
import {  } from './service/index'
import YchConstant from "@/api/YchConstant";
export default {
    components: {
        commpVxeTable,
    },
    data() {
        return {
            reCommpVxeTable: '',
            url: {
                sjqjPage:YchConstant.SPZX_OA + '/newflow-qxjgl/sjqjPage',// 请假记录
                sjlgPage:YchConstant.SPZX_OA + '/newflow-lgqs/sjlgPage',// 离岗记录
            },
            dataTableConfig: {
                api: YchConstant.SPZX_OA + '/newflow-qxjgl/sjqjPage',
                rowId: 'id',
                urlType: true,
                paramet: {}
            },
            columnsVxe: [],
            columnsVxeLg: [
                {
                    title: '姓名',
                    field: 'fxm',
                    width: 80,
                    interval:true,
                    slots: {
                        default:'operation_fxm',
                    }
                },{
                    title: '科室',
                    field: 'ftbbm',
                },{
                    title: '离岗开始时间',
                    field: 'flgsj',
                },{
                    title: '离岗结束时间',
                    field: 'fhgsj',
                },{
                    title: '返岗时间',
                    field: 'fxjsj',
                },{
                    title: '实际离岗时间',
                    field: 'fsjlgsj',
                }
            ],
            columnsVxeQxj: [
                {
                    title: '姓名',
                    field: 'fxm',
                    width: 80,
                    interval:true,
                    slots: {
                        default:'operation_fxm',
                    }
                },{
                    title: '科室',
                    field: 'fbm',
                },{
                    title: '请休假开始时间',
                    field: 'fqjkssj',
                    slots: {
                        default:'operation_fqjkssj',
                    }
                },{
                    title: '请休假结束时间',
                    field: 'fsqsj',
                    slots: {
                        default:'operation_fqjjssj',
                    }
                },{
                    title: '销假时间',
                    field: 'fxjqrsj',
                    slots: {
                        default:'operation_fxjqrsj',
                    }
                },{
                    title: '实际请休假时间',
                    field: 'fsjqjsj',
                }
            ],
            formItem: [
                {
                    label: '申请人',
                    model: 'fxm',
                },
            ],
            summaryActiveKey: '请休假记录',

        }
    },
    mounted() {
        this.columnsVxe = [...this.columnsVxeQxj]
    },
    methods: {
        // 搜索
        searchEvent(){
            this.dataTableConfig.paramet = {
                ...this.dataTableConfig.paramet,
            }
        },
        // 重置
        resetEvent(){
            this.dataTableConfig.paramet = {
                ...this.dataTableConfig.paramet,
            }
        },
        summaryActiveChange(val){
            //console.log(val,this.url)
            if(val == '请休假记录'){
                this.dataTableConfig.api = YchConstant.SPZX_OA + '/newflow-qxjgl/sjqjPage'
                this.columnsVxe = [...this.columnsVxeQxj]
            } else if(val == '离岗记录'){
                this.dataTableConfig.api = YchConstant.SPZX_OA + '/newflow-lgqs/sjlgPage'
                this.columnsVxe = [...this.columnsVxeLg]
            }
            //console.log(this.dataTableConfig)
            this.reCommpVxeTable = Date.now()
        },
        cancel() {
            //console.log('Cancel');
        },
    },
}
</script>
